<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
    <style>
        .swiper-container{
            width: 100%;
            height: 200px;
            border: 1px solid black;
        }
        .swiper-slide{
            width: 100%;
            height: 100%;
        }
        .swiper-slide:nth-child(1){
            background-color: #4390ee;
        }
        .swiper-slide:nth-child(2){
            background-color: #ca4040;
        }
        .swiper-slide:nth-child(3){
            background-color: #ff8604;
        }
    </style>
</head>

<body>
    <div id="app">
        <pre v-pre class="note">
        vm.$nextTick ：等同于 nextTick ，将执行函数体延迟到页面DOM更新完成后执行
            + 响应式变量修改完成后，需要继续完成对应的页面DOM元素的渲染，变量变化到页面渲染完成是需要时间执行的【时间差】
            + 因为时间差的原因，可能导致部分需要基于DOM数量完成功能的三方插件无法准确识别更新后的DOM操作
        </pre>
        <p ref="pDomA">msg:{{ msg }}</p>
        <input type="button" value="修改msg数据" @click="setMsg()">
        <hr>
        <div class="swiper-container" ref="loopA">
            <div class="swiper-wrapper">
                <!-- <div class="swiper-slide">slider1</div>
                <div class="swiper-slide">slider2</div>
                <div class="swiper-slide">slider3</div> -->
                <div v-for="item in size" class="swiper-slide">{{ "slide"+item }}</div>
            </div>
        </div>
        <input type="button" value="initLoop" @click="initLoop()">
    </div>

    <link rel="stylesheet" href="../assets/swiper3/swiper.min.css">
    <script src="../assets/swiper3/swiper.min.js"></script>

    <script src="../assets//mockjs/mock-min.js"></script>
    <script type="module">
        import { createApp, nextTick } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data () {
                return {
                    msg: "旧数据",
                    // size:[1,2,3]
                    size:[]
                }
            },
            methods: {
                // setMsg() {
                //     console.log("变量更新前:",this.msg,this.$refs.pDomA.textContent )
                //     // 修改仓库数据 - 可以表示仓库变量是否修改完成，但不能表示页面元素渲染完成
                //     this.msg = Mock.mock("@cword(3,3)")
                //     console.log("变量更新后:",this.msg,this.$refs.pDomA.textContent )
                //     // 使用计时器无法准确识别延迟的时间
                //     // setTimeout(() => {
                //     //     console.log("变量更新后【延迟】:",this.msg,this.$refs.pDomA.textContent )  
                //     // }, 10);
                //     // this.$nextTick(()=>{
                //     //     // 该回调方法会在 nextTick方法定义的位置上面寻找更新，根据更新变量完成自动的监视判断，选择合适时间进行回调执行
                //     //     console.log("变量更新后【延迟】:",this.msg,this.$refs.pDomA.textContent ) 
                //     // })

                //     // vue3 通过加载nextTick方法
                //     //           import { createApp,nextTick } from "../assets/vue3/vue.esm-browser.js";
                //     // nextTick(()=>{
                //     //     console.log("变量更新后【延迟】:",this.msg,this.$refs.pDomA.textContent )
                //     // })

                //     // vue3 通过 promise 对象 nextTick 方法进行了 promise 实现，所以nextTick也可以使用promise语法规则
                //     // console.log( this.$nextTick() );
                //     this.$nextTick().then(()=>{
                //         console.log("变量更新后【延迟】:",this.msg,this.$refs.pDomA.textContent )
                //     })
                // }
                async setMsg () {
                    console.log("变量更新前:", this.msg, this.$refs.pDomA.textContent)
                    this.msg = Mock.mock("@cword(3,3)")
                    console.log("变量更新后:", this.msg, this.$refs.pDomA.textContent)
                    // vue3 写法
                    await this.$nextTick()
                    console.log("变量更新后【延迟】:", this.msg, this.$refs.pDomA.textContent)
                },
                async initLoop(){
                    this.size = [1,2,3]
                    await this.$nextTick();
                    // Swiper 需要依赖页面中DOM的数量来初始化轮播效果
                    new Swiper(this.$refs.loopA,{})
                }
            },
        }).mount("#app")
    </script>
</body>

</html>